<template>
	<view>
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">开始维修</block>
		</cu-custom>
		
		<view>
			<view>
				<!-- 到达现场拍摄照片 -->
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						到达现场拍摄照片
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view v-if="!imgFrontPath" class="grid col-4  grid-square flex-sub">
							<view class="bg-img" @tap="ViewImage(1)" v-if="imgFront">
								<image :src="imgFront" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg(1)">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage(1)" v-if="!imgFront">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
						
						<view class="bg-img" @tap="ViewImage()" v-else-if="imgFrontPath">
							<view>
								<image :src="handleImg()" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg()">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage(1)" v-if="!imgFrontPath">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view style="margin-top: 3rpx;">
				<!-- 维修结束拍摄照片 -->
				<view class="cu-bar bg-white">
					<view class="action">
						维修结束拍摄照片
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @tap="ViewImage(2)" v-if="imgOver">
						 <image :src="imgOver" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg(2)">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage(2)" v-if="!imgOver">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="position: fixed;bottom: 0rpx;width: 100%;">
			<button @tap="overOrder()" class="cu-btn block bg-orange margin-tb-sm lg">
				维修结束
			</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgFront: '',
				imgOver: '',
				// 服务器地址
				imgFrontPath: '',
				imgOverPath: '',
			}
		},
		onLoad() {
			this.imgFrontPath = uni.getStorageSync('imgFrontPath')
		},
		methods: {
			handleImg(){
				return this.$api.baseImg + this.imgFrontPath
			},
			ViewImage(type) {
				switch (type){
					case 1:
						uni.previewImage({
							urls: this.imgFront
						});
						break;
					case 2:
						uni.previewImage({
							urls: this.imgOver
						});
						break;
					default:
						uni.previewImage({
							urls: [this.handleImg()]
						});
						break
				}
			},
			ChooseImage(type) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						
						switch (type){
							case 1:
								that.imgFront = res.tempFilePaths
								that.uploadImg(1, that.imgFront)
								break;
							case 2:
								that.imgOver = res.tempFilePaths
								that.uploadImg(2, that.imgOver)
								break;
							default:
								break;
						}
						
					}
				});
			},
			overOrder(){
				uni.removeStorageSync('imgFrontPath')
				if(!this.imgFrontPath){
					uni.showToast({
						title:"请上传维修前图片",
						icon: 'none'
					})
					return ;
				}
				if(!this.imgOverPath){
					uni.showToast({
						title:"请上传维修结束后图片",
						icon: 'none'
					})
					return ;
				}
				let order = uni.getStorageSync('orderDatil')
				this.$api.overOrder({
					imgFrontPath: this.imgFrontPath,
					imgOverPath: this.imgOverPath,
					orderId: order.id,
				}).then((res)=>{
					console.log('request success', res)
					if(res.data.status == 200 && res.data.data){
						uni.reLaunch({
							url: '../main/main'
						})
					}
				}).catch((err)=>{
					console.log('request fail', err);
				})
				
			},
			uploadImg(type, filePath){
				//微信小程序只支持单张图片上传，选择的时候就直接上传
				let that = this
				let url = that.$api.baseUrl + '/kaxiu/imageUpload'
				uni.uploadFile({
					url: url,
					filePath: filePath[0],
					name: 'file',
					success: (uploadFileRes) => {
						const resData = JSON.parse(uploadFileRes.data).data
						switch (type){
							case 1:
								//到达现场的照片拍摄完成后可以保存起来，再次打开小程序可以展示，不需要重新拍摄，提交至服务器后需删除
								that.imgFrontPath = resData
								uni.setStorageSync('imgFrontPath', resData)
								break;
							case 2:
								that.imgOverPath = resData
								break;
						}
					}
				});
			},
			DelImg(type) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '是的',
					success: res => {
						if (res.confirm) {
							switch (type){
								case 1:
									this.imgFront = ''
									break;
								case 2:
									this.imgOver = ''
									break;
								default:
									this.imgFrontPath = ''
									uni.removeStorageSync('imgFrontPath')
									break;
							}
						}
					}
				})
			},
		}
	}
</script>

<style>

</style>
